<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="/main.xhtml">

	<ui:define name="menu">
		<li><a href="reservarQuarto" class="nav ancora">Reservar Quarto</a></li>
		<li><a href="listaReservas" class="nav ancora">Reservas</a></li>
		<li><a href="alterarSenha" class="nav ancora">Alterar Senha</a></li>
		<h:form>
			<li><h:commandLink action="#{cadastrarUsuario.logout()}" styleClass="nav ancora" value="Sair" rendered="#{cadastrarUsuario.clienteLogado}" /></li>
		</h:form>
	</ui:define>
	
	<ui:define name="conteudo">
		<h:panelGroup rendered="#{cadastrarUsuario.clienteLogado and cadastrarUsuario.hospede.primeiroAcesso}">
			<h:form id="formMudarSenha">
				<h1> Mudar Senha </h1>
				<hr/>
				<br/>
				<h:outputText value="Para o primeiro acesso é necessário a mudança da senha." />
				
				<br/>
				<br/>
				<br/>
				<label>Senha:</label>
				<br/>
			    <h:inputSecret value="#{cadastrarUsuario.senha1}" id="senha" styleClass="validate[required, minSize[6]] text-input inputCampos"/>
			         
			    <br/>   	  		
			    <label>Repita a senha:</label>
			    <br/>
			    <h:inputSecret value="#{cadastrarUsuario.senha2}" id="senha2" styleClass="validate[required, minSize[6]] text-input, inputCampos"/>
				
				<br/>		
				<h:commandButton value="Cadastrar" action="#{cadastrarUsuario.cadastrarNovaSenha}" />
		
			</h:form>
		</h:panelGroup>
	
	<h:panelGroup rendered="#{cadastrarUsuario.clienteLogado and not cadastrarUsuario.hospede.primeiroAcesso}">
		<h1 id="reservarQuarto" class="lugarAncora">
			Reservar Quarto
		</h1>
		
		<hr/>
		
		<div id="reservarQuarto" class="linha divForm">
	
			<h:form id="reservarQuarto">
				
				<div class="inputs">
					<label>Tipo do Quarto:</label>
	
					<h:selectOneRadio value="#{reservarAction.reserva.tipoQuarto}" styleClass="coisaNojenta">
						<f:selectItem itemLabel="Quarto Simples" itemValue="QUARTO_SIMPLES" />
						<f:selectItem itemLabel="Quarto Duplo" itemValue="QUARTO_DUPLO" />
						<f:selectItem itemLabel="Quarto Triplo" itemValue="QUARTO_TRIPLO" />
					</h:selectOneRadio>
	
											
					<div class="inputLinha primeiro">
						<label>Data de entrada:</label>
						<h:inputText value="#{reservarAction.reserva.dataEntrada}" id="de" styleClass="validate[required] text-input datepicker">
					    	<f:convertDateTime pattern="dd/MM/yyyy"/>
						</h:inputText>
					</div>
				       
				    
				    <div class="inputLinha">
						<label>Data de saída:</label>
						<h:inputText value="#{reservarAction.reserva.dataSaida}" id="ate" styleClass="validate[required] text-input datepicker">
					    	<f:convertDateTime pattern="dd/MM/yyyy"/>
					    </h:inputText>
					</div>
					
					
					<label>Numero de Pessoas</label>
					<h:inputText value="#{reservarAction.reserva.numeroPessoas}"/>
						
						 
					<label>Observações</label>
					<h:inputTextarea value="#{reservarAction.reserva.obs}" rows="6"/>
			       
			   	</div>

				<h:commandButton action="#{reservarAction.cadastrarReserva}"
					value="Realizar Reserva" id="botaoCadastrar" />
			</h:form>
		</div>
		
		<h1>Reservas</h1>
		
		<hr></hr>
		
		<div id="listaReservas" class="linha">
						
			<p:dataTable id="tabelaReservas" value="#{cadastrarUsuario.listaReservas}" var="reserva"
						paginatorPosition="bottom" paginator="true" rows="10" >
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Data de Entrada" />
					</f:facet>
					<h:outputText value="#{reserva.dataEntrada}" id="dataEntrada"/>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Data de Saída" />
					</f:facet>
					<h:outputText value="#{reserva.dataSaida}" id="dataSaida"/>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Tipo do Quarto" />
					</f:facet>
					<h:outputText value="#{reserva.tipoQuarto.nome}" id="tipoQuarto"/>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Número do Quarto" />
					</f:facet>
					<h:outputText value="#{reserva.quarto.numero}" id="numeroQuarto"/>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Preço do Quarto" />
					</f:facet>
					<h:outputText value="R$ #{reserva.quarto.preco}" id="precoQuarto"/>
				</p:column>
				
			</p:dataTable>
			
		</div>
		
		<h1 id="alterarSenha" class="lugarAncora">
			Alterar Senha
		</h1>
		
		<hr/>
		
		<div id="alterarSenha" class="linha divForm">
			<h:form id="formalterarSenha">
				<div class="inputs">
					<label>Senha Atual:</label>
					<h:inputSecret value="#{cadastrarUsuario.senhaAtual}" id="senhaAtual" styleClass="validate[required, minSize[6]] text-input inputCampos"/>
				
					<label>Nova Senha:</label>
					<h:inputSecret value="#{cadastrarUsuario.senha1}" id="senha" styleClass="validate[required, minSize[6]] text-input inputCampos"/>
				         
				    <label>Repita a nova senha:</label>
				    <h:inputSecret value="#{cadastrarUsuario.senha2}" id="senha2" styleClass="validate[required, minSize[6]] text-input, inputCampos"/>
				</div>
				
				<h:commandButton value="Alterar Senha" action="#{cadastrarUsuario.alterarSenha}" />
			</h:form>
		</div>
		
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/modalDialog/jquery.simplemodal.js" ></script>
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/unidade/jbossGayDaCu.js" charset="UTF-8"></script>
					
		<script type="text/javascript">
			$(function(){
				$("form#reservarQuarto").validationEngine();
				
				$("input[id='reservarQuarto:de']").mask("99/99/9999");
				$("input[id='reservarQuarto:ate']").mask("99/99/9999");
				
				$( "[id='reservarQuarto:de']" ).datepicker({
		            //defaultDate: "+1w",
		            minDate: "1D",
		            changeMonth: true,
		            numberOfMonths: 3,
		            onClose: function( selectedDate ) {
		                $( "[id='reservarQuarto:ate']" ).datepicker( "option", "minDate", selectedDate );
		            }
		        });
		        
		        $( "[id='reservarQuarto:ate']" ).datepicker({
		            defaultDate: "+1w",
		            changeMonth: true,
		            numberOfMonths: 3,
		            onClose: function( selectedDate ) {
		                $( "[id='reservarQuarto:de']" ).datepicker( "option", "maxDate", selectedDate );
		            }
		        });

		        $(window).unbind("scroll");
			});
		</script>
		
		<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/validacao/validacao.css" />
		<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/validacao/validacaoForm.css" />
		<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/modalDialog/basic.css" />
		
		<style type="text/css">
			div.linha{
				padding-top: 1%;
			}
		
			div.inputLinha{
				width: 45% !important;
			}
			
			div#listaQuartos{
				float: left;
				width: 100%;
				
				padding-top: 1%;
			}
		
			div#tabelaReservas table tbody tr{
				cursor: pointer;
			}
			
			div#tabelaReservas table tbody tr:hover{
				background: #85B2CB !important;
			}
			
			.simplemodal-data li{
				padding-bottom: 1%;
			}
						
			li.th{
				width: 50%;
				float: left;
			}
			
			li.td{
				width: 50%;
				float: left;
				
				font-weight: bold;
			}
			
			div.simplemodal-data h3{
				text-shadow: none;
			}
			
			table {
				padding-bottom: 3%;
			}
			
			input[type=submit]{
				clear: both;
			}
		</style>
		    			
				
		</h:panelGroup>
	</ui:define>
</ui:composition>